<template>
	<view class="home">
		<cmd-nav-bar :fixed="true" back  left-text="犬证预约" :right-text="right_text" @rightText="fon_next" title="" font-color="#464c5b"
		 background-color="white"></cmd-nav-bar>
		<view class="mo_ban"></view>
		<view v-show="active_ == 0">
			
			<view class="cla_text">
				基本信息
			</view>
			<view class="cla_content">
				<view class="item_">
					<text class="item_name">联系电话：</text>
					<input class="item_inp" type="number" v-model="information.telephone" placeholder="请输入联系电话" />
				</view>
				<view class="item_">
					<text class="item_name">密码：</text>
					<input class=" item_inp"  v-model="information.password" placeholder="请输入手机号码" />
				</view>
          <!-- 		<view class="item_">
					<text class="item_name">验证码：</text>
					<input class="item_inp item_auto" type="number" v-model="from_next.code" placeholder="请输入验证码" />
					<button class="mini-btn item_mini" type="primary" size="mini">获取验证码</button>
				</view> -->
			</view>
			<view class="from_buttom">
				<button class="button_next" :disabled="Testing" @click="next_fn" type="primary">继续</button>
			</view>
		</view>

		<view v-show="active_ == 1">
			<view class="cla_text">
				填写详细居住地址
			</view>
			<view class="cla_content">
				<view class="item_">
					<text class="item_name">现居省市：</text>
					<input class="item_inp" v-model="information.city" @click="openPicker" placeholder="请输入现居省、市" />
				</view>
				<view class="item_">
					<text class="item_name">区：</text>
					<input class=" item_inp" v-model="information.region" @click="openPicker" type="text" placeholder="请输入居住社区" />
				</view>
				<view class="item_">
					<text class="item_name">详细地址：</text>
					<input class=" item_inp" v-model="information.address" type="text" placeholder="请填写详细地址" />
				</view>
			</view>
			<view class="from_buttom">
				<button class="button_next" :disabled="Testing" @click="next_two" type="primary">继续</button>
			</view>
		</view>

		<view v-show="active_ == 2">
			<!-- <view class="cla_text">
				宠物基本信息（还未录入宠物信息，可点击添加宠物）
			</view> -->
			<view class="cla_content">
				<view class="item_">
					<text class="item_name">宠物昵称</text>
					<input class=" item_inp" v-model="addpet.nickname" placeholder="请输入宠物昵称" />
				</view>
				<view class="item_">
					<text class="item_name">宠物性别</text>
						<picker class="item_inp chu_s" @change="GenderChange" :value="indexs" :range="Gender">
						<view class="uni-input unitest">{{Gender[indexs]}}</view>
					</picker>
				</view>
				<view class="item_">
					<text class="item_name">宠物品种</text>
					<input class=" item_inp" placeholder="请输入品种" v-model="addpet.variety"/>
				</view>
				<view class="item_">
					<text class="item_name">出生日期</text>
					<picker class="item_inp chu_s" mode="date" placeholder="请输入品种" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input unitest">{{date}}</view>
					</picker>
				</view>
			</view>
	
			<view class="cla_text">
			 宠物头像
			</view>
			<view class="cla_header_body">
				<!-- <view class="item_"> -->
				<el-upload
				  class="avatar-uploader"
				  action=""
				  :show-file-list="false"
				  :before-upload="beforeAvatarUpload">
				  <img v-if="imageUrl" :src="imageUrl" class="avatar">
				  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>	
				<!-- </view> -->
	
			</view>
			<view class="from_three">
				<button class="button_next" :disabled="Testing" @click="next_three" type="primary">提交</button>
			</view>
		</view>
		<view class="three_body" v-show="active_ == 3">
			<view class="three_moban"></view>
			<view class="header_body">
				<img :src="duoxuangou" alt="">
				<view>材料添加成功</view>
			</view>
			<view class="text_view">
				<view>材料以成功提交至办证宠物医院</view>
				<view>您可直接在犬证服务查询附近宠物医院</view>
				<view>您的预约单号为：45646456，可在进度查询里再次查找</view>
			</view>
			<view>
			</view>
		</view>
     <lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>

	</view>
</template>
<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import shenfenzhengzhengmian from "@/static/bidfor/shenfenzhengzhengmian.png"
	import shenfenzhengfanmian from "@/static/bidfor/shenfenzhengfanmian.png"
	import xiangji from "@/static/bidfor/xiangji.png"
	import duoxuangou from "@/static/process/duoxuangou.png"

	import uniSteps from "@/components/uni-steps/uni-steps.vue"
	import uniBadge from "@/components/uni-badge.vue"
	import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue"
    import image_upload from '@/static/home/ic_image_upload.png'

	export default {
		props: {},
		components: {
			cmdNavBar,
			uniSteps,
			uniBadge,
			"lotus-address":lotusAddress,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
		imageUrl: '',
				/******用户注册信息******/
				information:{
					telephone:'', //电话号码
					password:'',//密码
					city:'',//城市
					region:'',//市区
					address:'',//详细地址
					avatar:'x'//头像
				},
				/************  地区 选择 ***************/
				       lotusAddressData:{
				                visible:false,
				                provinceName:'四川省',
				                cityName:'绵阳市',
				                townName:'涪城区',
				            },
				            region:'',
					/************ 宠物信息选择 ***************/
					image_upload,
					title: 'picker',
					Gender:['GG','MM'],
						indexs: 0,
					arrays: ['绝育', '未绝育'],
				  arrays_index:0,
					date: currentDate,
					time: '12:01',
					/******* 添加宠物 *******/
					addpet:{
						nickname:'',//名称
						age:'',//年龄
						sex:'GG',   //性别
						variety:'', //品种
						avatar:'1',  //头像
					},
				duoxuangou,
				zhenmian_data: '',
				fanmian_data: '',
				cwzhenmian_img: '',
				cwcemian_img: '',
				xiangji,
				shenfenzhengzhengmian,
				shenfenzhengfanmian,
				right_text: '',
				header_top: [{
					title: "基本情况"
				}, {
					title: "居住信息"
				}, {
					title: "犬只信息"
				}, ],
				active_: 0,
				Testing: true,
				from_next: { //基本情况
					name: '',
					phone: '',
					code: ''
				},
				from_address: { //居住信息
					province: '',
					area: '',
					address: ''
				},
				// Gender: ['潇洒哥', '胖头妹', '肥毛腿'],
				purpose: ['导盲犬', '观赏犬', '警犬', '看门犬'],
				Gender_val: "",
				purpose_val: "",
				// index: 0,

			}
		},
		methods: {
	
	 beforeAvatarUpload(file) {  //图片上传
	 if(this.addpet.nickname == ''){
	 	uni.showToast({
	 	    title: '请添加宠物名称',
	 		icon:'none',
	 	    duration: 2000
	 	});
	 	return false
	 }
	// if (this.$oneselfFn.IMAGEVAL(file)) {
	  this.$imgFn.seend({
	    'path': this.$ENV.TRACING + this.$ENV.USER + uni.getStorageSync('USERINFO').id +'/'+ this.$ENV.PETAVATAR +'/'+this.addpet.nickname  ,file}).update(
	    (ref) => {
	      if (ref.status == 200) {
			  this.imageUrl = ref.data.imageURL +'/'+ref.data.imagePath;
	      }
	    }, (res) => {
	    })
	// } else {
	// uni.showToast({
	//     title: '图片大小不能超过2M',
	// 	icon:'none',
	//     duration: 2000
	// });
	// }
	// return false
},
    GET_IMG() { // 获取所有图片
      this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.USER + uni.getStorageSync('USERINFO').id +'/'+ this.$ENV.PETAVATAR+'/'+this.addpet.nickname }).select(
        (ref) => {
          if (ref.status == 200) {
            if (ref.data != {}) {
				this.imageUrl = this.$ENV.UPLOADIMG + ref.data[0];
              this.loading = false
            }
          }
        }, (res) => {
          // console.log(res)
        })
    },
			/************ 提交 数据  ***************/
			next_three() { //第三页
			if(this.addpet.nickname == ''){
				uni.showToast({
				    title: '请添加宠物名称',
					icon:'none',
				    duration: 2000
				});
				return false
			}
			if(this.addpet.variety == ''){
				uni.showToast({
				    title: '请添加宠物品种',
					icon:'none',
				    duration: 2000
				});
				return false
			}
			
			if(this.imageUrl == ''){
				uni.showToast({
				    title: '请添加宠物头像',
					icon:'none',
				    duration: 2000
				});
				return false
			}
				this.addpet.sex = this.Gender[this.indexs];
				this.addpet.age = this.date;
				this.$apifn.BindingDog(this.addpet).then((res)=>{
					if(res.data.Response.code == 200){
				this.active_ = 3;
					}
					
				}).catch((ret)=>{
					
				})
				
			},
			next_two() { //第二页 用户注册 登陆页面

				this.$apifn.registered(this.information).then((res)=>{
					 if(res.data.Response.code == 200){
						  uni.setStorageSync('refresh_token', res.data.Response.data.refresh_token);
						this.active_ = 2;
						this.Testing = false;
					 }
				 }).catch((ret) => {
				  if(ret.code == 422){
					  uni.showToast({
					      title: '账号已存在或者资料为填全',
						  icon:'none',
					      duration: 2000
					  });
                   this.active_ = 0;
				   this.Testing = false;
				  }
                })
			},
			user_login(phone,password){
				this.$apifn.Login({'telephone':phone,'password':password}).then((res)=>{
					console.log(res)
					 if(res.data.Response.code == 200){
						 console.log(res.data.Response)
					 }
				 });
			},
					/************ 添加宠物 ***************/
	GenderChange:function(e){
		this.indexs = e.target.value
	},
	bindPickerChange: function(e) {
		// console.log('picker发送选择改变，携带值为', e.target.value)
		this.arrays_index = e.target.value
	},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
			
				return `${year}-${month}-${day}`;
			},
				/************  地区 选择 ***************/
			   openPicker() {
			            this.lotusAddressData.visible = true;
			        },
			        choseValue(res){  //地区选择
			            this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
			            if(res.isChose){
							// this.information.avatar = res.provice//省
							this.information.city = `${res.provice}-${res.city}`;//市
							this.information.region = res.town;      //区

			            }
			        },
					
			next_fn() { //第一步下一页
				this.Testing = false;
				this.active_ = 1;
			},

			cwzhenmian() { //宠物正面
				// uni.chooseImage({
				// 	count: 1, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['album', 'camera '], //从相册选择
				// 	success: (res) => {
				// 		this.cwzhenmian_img = res.tempFilePaths[0];
				// 		 const tempFilePaths = res.tempFiles[0];
				// 		 console.log(tempFilePaths)
				// 		uni.uploadFile({
				// 		      url : this.$ENV.API_CONFIG.ADDIMG ,
				// 		      filePath: tempFilePaths,
				// 			  files:tempFilePaths,
				// 			  fileType:'image',
				// 		      name: 'image',
				// 		      formData: {
				// 		       'pathname':  this.$ENV.TRACING +this.$ENV.USERDOG,
				// 		      },
				// 		      success: function (uploadFileRes) {
				// 		       console.log(uploadFileRes.data);
				// 		      }
				// 		     });
				// 		   // this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.USERDOG,tempFilePaths}).addimg(
				// 		   //          (ref) => {
				// 					// 	console.log(ref)
				// 		   //            if (ref.status == 200) {
				// 		   //              // this.IDfanmianMianimageUrl = ref.data.imageURL + '/' + ref.data.imagePath
				// 		   //            }
				// 		   //          }, (res) => {
				// 		   //            console.log(res)
				// 		   //          })
				// 	}
				// });
			},
			cwcemian() { //宠物侧面
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '], //从相册选择
					success: (res) => {
						this.cwcemian_img = res.tempFilePaths[0];
					}
				});
			},
			fon_next() { //添加宠物
				// uni.navigateTo({
				// 	"url": '../../petscore/addpetscore',
				// });
			},
			Purpose_Change(e) {
				this.purpose_val = this.purpose[e.target.value];
			},
		},
		
		watch: {
			// information: {
			// 	handler(val) {
			// 		if (val.name == "") {
			// 			return true;
			// 		}
			// 		if (val.phone == "") {
			// 			return true;
			// 		}
			// 		this.Testing = false;
			// 	},
			// 	deep: true
			// },
			information: {
				handler(val) {
					if (val.name != "" && val.phone != "") {
						this.Testing = false;
						console.log(2018)
					}
					if (val.city == "") {
						return true;
					}
					if (val.region == "") {
						return true;
					}
					if (val.address == "") {
						return true;
					}
					this.Testing = false;
				},
				deep: true
			},
			purpose_val(i, v) {
				// console.log(i)
				if (i != '') {
					this.Testing = false;
				}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成
	    const token = uni.getStorageSync('refresh_token');
	      if (token) {
			    this.active_ = 0;
				this.Testing = false;
	      };
		  // this.GET_IMG()
		},

		onShow() { //监听页面显示
			//生命周期
		}
	}
</script>
<style lang="scss" scoped>
	/* image*/
	.avatar-uploader {
		width: 90%;
		margin: auto;
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 250upx;
	    height: 250upx;
	    line-height: 250upx;
	    text-align: center;
		border: 1px solid #e3e3e3;
	  }
	  .avatar {
	    width: 250upx;
	    height: 250upx;
		background-size: 100% 100%;
	    display: block;
	  }
	/* image*/
	.home {
		width: 100%;
		height: 100%;
	}
.unitest{
	margin-left: 40%;
}
	.three_body {
		width: 100%;
		height: 100%;
		background: white;

		.three_moban {
			width: 100%;
			height: 15%;
		}

		.header_body {
			width: 50%;
			margin: auto auto auto auto;

			img {
				display: block;
				margin: auto;
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
			}

			view {
				width: 100%;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				font-size: 18px;
			}
		}
		.text_view{
			width: 80%;
			height: 150upx;
			margin: 30upx auto auto auto;
			view{
				text-align: center;
				color: gray;
				font-size: 12px;
			}
		}
	}

	.cla_cwc {
		height: 50upx;
		width: 50upx;
		margin: 56upx auto auto auto;
		display: block;

	}

	.image_data {
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
	}

	.from_three {
		width: 80%;
		height: 100upx;
		margin: 140upx auto auto auto;
	}

	.chu_s {
		width: 100%;
	}

	.mo_ban {
		width: 100%;
		height: 92upx;
	}

	.text_input {
		// text-indent: 25upx;
	}

	.home_pom {
		width: 100%;
		background: white;

		.home_header {
			width: 80%;
			margin: auto;
		}
	}

	.cla_header_body {
		width: 100%;
		height: 250upx;
		background: white;
		display: flex;

		.cla_size {
			width: 45%;
			height: 200upx;
			background: #f4f4f4;
			border-radius: 16upx;
			margin: 20upx auto auto auto;

			.img_ {
				display: block;
				width: 40%;
			}

			view {
				font-size: 10px;
				color: #8f8f8f;
				width: 100%;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
			}
		}

		.cla_Positive {
			height: 100upx;
			margin: 20upx auto auto auto;
		}

		.cla_black {
			height: 120upx;
			margin: auto auto auto auto;
		}

	}

	.cla_content {
		width: 100%;
		// margin: auto;
		background: white;
	}

	.cla_text {
		width: 86%;
		height: 100upx;
		line-height: 100upx;
		color: #464c5b;
		font-size: 14px;
		margin: auto;
		// background: #F4F5F6;
	}

	.item_ {
		width: 90%;
		height: 100upx;
		border-bottom: 1px solid #e2e2e2;
		margin: auto;

		text {
			height: 100%;
			line-height: 100upx;
			margin-left: 3%;
			display: block;
			float: left;
		}

		.item_inp {
			height: 100%;
			padding-top: 6px;
			    padding-left: 8%;
		}

		.item_mini {
			float: left;
			width: 30%;
			margin-top: 10px;
			background-color: #005dc3;
		}

		.item_auto {
			float: left;
			width: 50%;
		}
	}

	.from_buttom {
		width: 80%;
		height: 100upx;
		margin: 300upx auto auto auto;

		.button_next {}
	}
</style>
